<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>记账网页</title>
        <script language="JavaScript">
            var total=0;
        function addfunc()
        {
            total+= Number(document.forms[0].elements[6].value);
            var choice="其他";
            if(document.forms[0].elements[0].checked) choice="衣";
            else if(document.forms[0].elements[1].checked) choice="食";
                else if(document.forms[0].elements[2].checked) choice="住";
                    else if(document.forms[0].elements[3].checked) choice="行";
                        else choice="其他";
        var recordPart=document.getElementById("record");
        var oNewInfo=document.createElement("div");
        var oCont=document.createTextNode("【"+choice+"】"+"事由："+document.forms[0].elements[5].value+"；价格："+document.forms[0].elements[6].value+"。");
        oNewInfo.appendChild(oCont);
        recordPart.appendChild(oNewInfo);
        document.getElementById("total").innerHTML="合计："+total;
        }
        </script>
    </head>

    <body>
        <form>
            <div>
                <input type="radio" name="ch" checked>衣&nbsp;
                <input type="radio" name="ch" checked>食&nbsp;
                <input type="radio" name="ch" checked>住&nbsp;
                <input type="radio" name="ch" checked>行&nbsp;
                <input type="radio" name="ch" checked>其他&nbsp;<br />
                事由：<input type="text" width="100px" />；价格：<input type="text" width="100px" /><input type="button" value="add" onclick="addfunc()">
            </div>
        </form>
        <div id="record"></div>
        <div id="total">合计：0</div>
    </body>
</html>